<template>
  <div class=" publicBox" id="serviceNewbuildCsss">

<el-form ref="form" :model="ruleForm"  class="demo-form-inline publicEditFrom" :rules="rules" label-width="160px" label-position="left">

<el-row>
     <div class="pubPageTagP">
               <p>服务项目管理/新建</p>
     </div>
</el-row>

<el-row>
         <el-form-item label="服务项目名称" prop="name">
                 <el-input class="pubSerIpt" v-model="ruleForm.name" v-if="!disabledFlag" placeholder="请输入服务项目名称"></el-input>
                  <p v-else>{{ruleForm.name}}</p>
       </el-form-item>
</el-row>

<el-row>
         <el-form-item label="服务项目时长" prop="hour">
                   <el-select v-model.number="ruleForm.hour"  filterable placeholder="0" class="pubSlt97">
                       <el-option
                         v-for="item in hour"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
                       </el-option>
                   </el-select>
                   H
                   <el-select v-model.number="ruleForm.minute" filterable placeholder="0" class="pubSlt97">
                       <el-option
                         v-for="item in minute"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
                       </el-option>
                   </el-select>
                   M
       </el-form-item>
</el-row>



<el-row>
         <el-form-item label="适用设备类型" prop="typeId">
                   <el-select v-model="ruleForm.typeId" v-if="!disabledFlag" filterable placeholder="洗衣机" class="pubSlt200">
                       <el-option
                         v-for="item in deviceTyp"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
                       </el-option>
                   </el-select>
                   <p v-else>{{ruleForm.typeId}}</p>
       </el-form-item>
</el-row>

<el-row>
         <el-form-item label="适用设备型号" prop="model">
                   <el-select v-model="ruleForm.model" v-if="!disabledFlag" filterable placeholder="CXG-800G" class="pubSlt200">
                       <el-option
                         v-for="item in rootOptions"
                         :key="item.id"
                         :label="item.model"
                         :value="item.id">
                       </el-option>
                   </el-select>
                   <p v-else>{{ruleForm.model}}</p>
       </el-form-item>
</el-row>

<el-row class="pubSubmitBtn-row">
           <el-form-item>
                         <el-button class="pubBtnGree" type="primary" @click="submitForm">提交</el-button>
                         <el-button class="pubBtnGray" @click="canCleFn"  type="primary">取消</el-button>
       </el-form-item>
</el-row>

</el-form>
    
  </div>
</template>

<script>

import * as Api from '@api/system.js'
import * as API from "@api/operate.js"
export default {
  components: {


  },
  data() {
    return {
      disabledFlag:false,
      rootOptions : [],
     hour:[{id:'00',name:'0'}, 
           {id:'01',name:'1'},  
           {id:'02',name:'2'},
           {id:'03',name:'3'},
           {id:'04',name:'4'},
           {id:'05',name:'5'},
           {id:'06',name:'6'},
           {id:'07',name:'7'},
           {id:'08',name:'8'},
           {id:'09',name:'9'},
           {id:'10',name:'10'},
           {id:'11',name:'11'},
           {id:'12',name:'12'},
           {id:'13',name:'13'},
           {id:'14',name:'14'},
           {id:'15',name:'15'},
           {id:'16',name:'16'},
           {id:'17',name:'17'},
           {id:'18',name:'18'},
           {id:'19',name:'19'},
           {id:'20',name:'20'},
           {id:'21',name:'21'},
           {id:'22',name:'22'},
           {id:'23',name:'23'},
           {id:'24',name:'24'}],
     minute:[
          {id:'00',name:'0'},
          {id:'01',name:'1'},
          {id:'02',name:'2'},
          {id:'03',name:'3'},
          {id:'04',name:'4'},
          {id:'05',name:'5'},
          {id:'06',name:'6'},
          {id:'07',name:'7'},
          {id:'08',name:'8'},
          {id:'09',name:'9'},
          {id:'10',name:'10'},
          {id:'11',name:'11'},
          {id:'12',name:'12'},
          {id:'13',name:'13'},
          {id:'14',name:'14'},
          {id:'15',name:'15'},
          {id:'16',name:'16'},
          {id:'17',name:'17'},
          {id:'18',name:'18'},
          {id:'19',name:'19'},
          {id:'20',name:'20'},
          {id:'21',name:'21'},
          {id:'22',name:'22'},
          {id:'23',name:'23'},
          {id:'24',name:'24'},
          {id:'25',name:'25'},
          {id:'26',name:'26'},
          {id:'27',name:'27'},
          {id:'28',name:'28'},
          {id:'29',name:'29'},
          {id:'30',name:'30'},
          {id:'31',name:'31'},
          {id:'32',name:'32'},
          {id:'33',name:'33'},
          {id:'34',name:'34'},
          {id:'35',name:'35'},
          {id:'36',name:'36'},
          {id:'37',name:'37'},
          {id:'38',name:'38'},
          {id:'39',name:'39'},
          {id:'40',name:'40'},
          {id:'41',name:'41'},
          {id:'42',name:'42'},
          {id:'43',name:'43'},
          {id:'44',name:'44'},
          {id:'45',name:'45'},
          {id:'46',name:'46'},
          {id:'47',name:'47'},
          {id:'48',name:'48'},
          {id:'49',name:'49'},
          {id:'50',name:'50'},
          {id:'51',name:'51'},
          {id:'52',name:'52'},
          {id:'53',name:'53'},
          {id:'54',name:'54'},
          {id:'55',name:'55'},
          {id:'56',name:'56'},
          {id:'57',name:'57'},
          {id:'58',name:'58'},
          {id:'59',name:'59'}],
     deviceTyp:[],
     ruleForm:{
      name:"",
      typeId:"",
      model:'',
      hour:''
     },
      rules: {
          name: [
            {required: true, message: '请输入服务项目名称', trigger: 'blur' }
          ],
          hour: [
            {required: true, message: '请选择服务时长', trigger: 'blur' }
          ],
          typeId: [
            {required: true, message: '请选择设备类型', trigger: 'blur' }
          ],
           model: [
            {required: true, message: '请选择设备型号', trigger: 'blur' }
          ]
        }
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
       canCleFn(){
           this.$router.go(-1)
       },
       async getRoot(){   //获取用户权限
             let res=await Api.getRootApi()
             if(res.IsPositive){
                  //  this.RootOptions=res.Data.records
                   this.ruleForm.pid=res.Data.records[0].id
             }else this.$message.warning("获取用户权限失败")
        },
      async addserviceAPI(){
        let res = ""
        if(this.disabledFlag){  //修改
              this.ruleForm.id=this.rowData.id
              this.ruleForm.hour = Number(this.ruleForm.hour)
              this.ruleForm.minute = Number(this.ruleForm.minute)
              res= await API.editserviceAPI(this.ruleForm)
           }else{  //新增
              res= await API.addserviceAPI(this.ruleForm)
           }
            if(res.IsPositive){
              this.$message.success({message:"操作成功"})
              this.$router.push({path:'/platform/operate/service'})
            }else{
              this.$message.error({message:res.ErrorCode})
            }
      },

       submitForm() {
           this.$refs["form"].validate((valid) => {
            if (valid) {
                    this.addserviceAPI()
            } else {
              return false;
            }
        });
       }

  },
  async created() {
           this.getRoot()
          //  this.RootOptionsapi()
           this.deviceTyp = await this.$getDeviceType(2,true)
           this.rootOptions = await this.$RootOptions(2,true)
           if(Object.keys(this.$route.query).length>0){              //ES6写法, Object.keys(targetObject)  将对象的key作为一个数组返回
                  this.disabledFlag=true        //true代表修改数据
                  this.rowData=this.$route.query.data
                  this.ruleForm={
                           name:this.rowData.name, 
                           hour:this.rowData.time.substr(0,2), 
                           minute:this.rowData.time.substr(3,2), 
                           typeId:this.rowData.typename, 
                           model:this.rowData.model,
                  }
        }
 
  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less'>


</style>